<template>
  <div class="flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="月份选择">
          <el-date-picker
            type="monthrange" v-model="monthrange"
            range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
            format="yyyy-MM" value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid-content">
      <grid-item-one></grid-item-one>
      <grid-item-two title="能源消费结构及占比" :info="info2"></grid-item-two>
      <grid-item-three title="月度能源构成" :info="info3"></grid-item-three>
    </div>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import GridItemThree from './grid-item-three'

export default {
  name: 'energy-efficiency-analysis-consumption-construct',
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree
  },
  data () {
    const end = this.$dayjs().format('YYYY-MM')
    const start = this.$dayjs().subtract(1, 'year').format('YYYY-MM')
    return {
      monthrange: [start, end],
      type: '',
      info2: ['电力', '煤炭', '热力', '油品', '焦炭', '气体燃料', '其他能源'].map((v) => ({
        name: v,
        value: Math.round(Math.random() * 99 + 1)
      })),
      info3: Array(7).fill(1).reduce((acc) => {
        const array = []
        Array(10).fill(1).forEach(() => {
          array.push(Math.round(Math.random() * 99 + 1))
        })
        acc = acc.concat([array])
        return acc
      }, []),
    }
  },
  computed: {
    qs () {
      const monthrange = this.monthrange
      return {
        start: monthrange[0],
        end: monthrange[1],
        type: this.type
      }
    }
  },
  methods: {
    onSearch () {},
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: $gutter;

    .content-block {
      border-radius: 4px;
      background: white;
    }
    .block-1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
  }
</style>
